<template>
  <div class="remarks-details">
    <el-form :model="remarksForm" label-width="120px">
      <!-- 星级评价板块 -->
      <el-form-item label="星级评价">
        <div v-for="(standard, index) in standards" :key="index" class="standard">
          <div class="label">{{ standard.label }}</div>
          <div class="stars">
            <el-rate
                v-model="standard.score"
                :colors="['#FFD700', '#FFD700', '#FFD700']"
                :icon-classes="['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on']"
                @change="updateStarComment"
            />
          </div>
        </div>
      </el-form-item>

      <!-- 快速评价按钮 -->
      <el-form-item label="快速评价">
        <el-button
            v-for="(text, index) in quickComments"
            :key="index"
            type="text"
            @click="updateTextComment(text)"
            class="quick-comment-button"
        >
          {{ text }}
        </el-button>
      </el-form-item>

      <!-- 详细评价 -->
      <el-form-item label="详细评价">
        <el-input
            type="textarea"
            v-model="remarksForm.comment"
            placeholder="请输入详细评价..."
            maxlength="500"
            show-word-limit
            rows="4"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElRate, ElButton, ElInput, ElMessage } from 'element-plus';

const standards = ref([
  { label: '准确', score: 0, comment: '未评价' },
  { label: '速度', score: 0, comment: '未评价' },
  { label: '态度', score: 0, comment: '未评价' }
]);

const quickComments = ref(['好; ', '服务真差; ', '赞美; ', '真不行; ', '态度恶劣; ', '踩; ']);

const remarksForm = reactive({
  comment: '' // 详细评价
});

const updateStarComment = () => {
  const scores = ['未评价; ', '非常差; ', '差; ', '一般; ', '好; ', '非常好; '];
  standards.value.forEach(standard => {
    standard.comment = standard.score > 0 ? scores[standard.score] : "";
  });
  remarksForm.comment = standards.value
      .filter(standard => standard.score > 0) // 只包含有评分的标准
      .map(s => `${s.label}: ${s.comment}`)
      .join('\n') + '\n\n' + remarksForm.comment;
};

const updateTextComment = (text) => {
  remarksForm.comment += text + '; '; // 更新总评论
};
</script>

<style scoped>
.remarks-details {
  padding: 20px;
}

.stars-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.standard {
  width: 30%; /* 根据需要调整宽度 */
}

.label {
  font-size: 16px;
  margin-bottom: 10px;
  display: block;
}

.stars {
  display: flex;
  align-items: center;
}

.quick-comment-button {
  margin-right: 10px;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 5px;
}
</style>